<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学习助手</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="icon" href="./img/logo.png" type="image/png">
</head>
<style>
    .title_label {
        left: 18px;
        top: 0px;
        height: 29px;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: left;
        font-family: PingFangSC-bold;
    }

    .header_main {
        width: 100%;
        margin: auto;
        background-image: url(./img/head_bg.png);
        background-position: top -140px right 0px;
        height: auto;
        padding: 10px;
        background-size: cover;
        background-size: 100%;
        background-repeat: no-repeat;
        color: dimgray;

    }


    .menuStyle>li {
        float: left;
        margin-left: 10px;
        color: #0e5407;
        font-size: 16px;
        font-weight: 700;
    }

    .workStyle>li {
        float: left;
        margin-left: 10px;
        color: #fff;
        font-weight: 700;
    }

    #infoDiv {
        margin-top: 50px;
        font-size: medium;
    }

    #infoDiv>label {
        margin-top: 10px;
    }

    #pswdInputForm>label {
        margin-top: 20px;
    }
</style>

<body id="mainAPP" class="header_main">
    <header id="home">

        <ul class="workStyle">
            <li>
                <!-- 今日，参数是当前时间往后退1天，所以参数天1 -->
                <button class="btn btn-success" onclick="window.location.href='/home.html'">个人信息 </button>

            </li>
            <li>
                <!-- 今日，参数是当前时间往后退1天，所以参数天1 -->
                <button class="btn btn-warning" onclick="window.location.href='/records.html'">加分记录 </button>

            </li>
            <li>
                <!-- 7天，参数是当前时间往后退7天，所以参数填7 -->
                <button class="btn btn-secondary" onclick="window.location.href='/fill.html'">填写加分 </button>
            </li>
        </ul>

    </header>
    <!-- 为 图表设置的 DOM -->
    <!-- 列出所选日期内有工作量的设备 -->


    <form id="infoDiv">
    </form>
    <button class="btn-sm btn-primary" data-bs-toggle="modal" style="position: absolute; bottom: 100px;"
        data-bs-target="#exampleModal"> 修改密码 </button>

    <button class="btn-sm btn-secondary" onclick="window.location.href='gpt.html'"
     style="position: absolute; bottom: 100px; left: 100px;"> Ai助手 </button>
    <input type="file" name="uploadname" onchange="upload(event)"
        style="position: absolute; bottom: 100px; right: 0px; width: 150px;" />
    <div class="modal" id="exampleModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改密码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form class="modal-body" id="pswdInputForm">
                    <label for="oldPswdInput">原来密码:</label>
                    <input type="password" id="oldPswdInput"> <br>
                    <label for="newPswdInput">新的密码:</label>
                    <input type="password" id="newPswdInput"><br>
                    <label for="rePswdInput">确认密码:</label>
                    <input type="password" id="rePswdInput">
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="savePswd() "
                        data-bs-dismiss="modal">确定修改</button>
                </div>
            </div>
        </div>
    </div>
    <div style="position:absolute; bottom: 0px;left: 0; width: 100%;   background-color: #17ad74; " id="bottomBox">
        <div style="color: white; text-align: center;" id="userinfo">信息工程学院</div>
    </div>
    <script type="text/javascript" src="./js/md5.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>


    <script>

        function getUserInfo() {
            let userinfo = localStorage.getItem("userInfo");
            userinfo = JSON.parse(userinfo);
            let infoHtml = '';
            infoHtml += ` <label >姓名：</label> <span> ` + userinfo.Name + ` </span><br/>`
            infoHtml += ` <label >性别</label> <span> ` + userinfo.Sex + ` </span><br/>`
            infoHtml += ` <label >班级：</label> <span> ` + userinfo.Classname + ` </span><br/>`
            infoHtml += ` <label >学号</label> <span> ` + userinfo.Sn + ` </span><br/>`
            infoHtml += ` <label >密码：</label> <span> ` + userinfo.Pswd + ` </span><br/>`
            infoHtml += ` <label >学籍</label> <span> ` + userinfo.Xueji + ` </span><br/>`
            infoHtml += ` <label >账户额度:</label> <span> ` + userinfo.Account + ` </span><br/>`
            infoHtml += ` <label >年级:</label> <span> ` + userinfo.Grade + ` </span><br/>`
            infoHtml += ` <img src="` + userinfo.Face + `" id="faceImage" width="100px" alt="" srcset="">  </span><br/>`


            document.getElementById("infoDiv").innerHTML = infoHtml;

        }
        getUserInfo();

        function savePswd() {
            let userinfo = localStorage.getItem("userinfo");
            userinfo = JSON.parse(userinfo);
            let oldPswd = document.getElementById("oldPswdInput").value;
            let newPswd = document.getElementById("newPswdInput").value;
            if (oldPswd != userinfo.Pswd) {
                alert("您输入的旧密码 不正确");
                return
            }
            // 把令牌 放到 请求的 header 里面

            let token = localStorage.getItem("token");

            var myHeaders = new Headers();
            myHeaders.append("Authorization", token);
            myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");

            var requestOptions = {
                method: 'GET',
                headers: myHeaders,
                redirect: 'follow'
            };

            fetch("http://localhost:8080/v3/classmates/modifyPswd/" + userinfo.Id + "?oldpswd=" + oldPswd + "&newpswd=" + newPswd, requestOptions)
                .then(response => response.text())
                .then(result => console.log(result))
                .catch(error => console.log('error', error));
        }

        // 创建 WebSocket 对象，连接到Go语言服务器的WebSocket端点
        const socket = new WebSocket('ws://localhost:8080/v3/classmates/getChouJiangRenList');
        // 当WebSocket连接成功建立时触发的事件
        socket.onopen = function () {
            console.log('WebSocket连接已建立');
        };

        // 当接收到来自服务器的消息时触发的事件
        socket.onmessage = function (event) {
            document.getElementById("msgList").innerHTML += event.data + "<br>"
            console.log(event.data);
        };


        function upload(e) {
            var file = e.target.files[0];
            if (file == null) {
                alert("没有选择文件");
                return
            }
            let userinfo = localStorage.getItem("token");
            var myHeaders = new Headers();
            myHeaders.append("Authorization", userinfo);
            var formdata = new FormData();
            formdata.append("uploadname", file);
            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: formdata,
                redirect: 'follow'
            };
            fetch("/v3/classmates/upload/face", requestOptions)
                .then(response => response.json())
                .then(result => {
                    if (result.Code == 1000) {
                        document.getElementById("faceImage").setAttribute("src", result.Data);
                        alert(result.Title);
                        return
                    } else {
                        alert(result.Title);
                    }
                })
                .catch(error => console.log('error', error));
        }



        function sendMessage() {
            let msg = document.getElementById("liaotianInput").value;
            socket.send(msg);
        }
    </script>


</body>

</html>